<template>
  <div>
    <!-- 搜索 -->
    <van-search
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
    />

  <!-- tab -->
    <van-tabs animated>
     <van-tab title="推荐">
       <!-- 轮播 -->
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
     </van-tab>
     <van-tab title="手机">
       2
     </van-tab>
     <van-tab title="智能">
       3
     </van-tab>
     <van-tab title="家电">
       4
     </van-tab>
    </van-tabs>
  </div>
</template>


<script>
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

export default {
  data() {
    return {
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/af31685c81d8958069c17b1e40ea2d78.jpg?thumb=1&w=720&h=360',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/84db956ed8bec2bd8a6036b432d29490.jpg?thumb=1&w=720&h=360',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/36de3a3097b4b9fd0a2891b2441c226e.jpg?thumb=1&w=720&h=360',
        require('@/assets/logo.png')
      ],
    };
  },
};
</script>

<style scoped>
img {
  width: 100%;
  height: 200px
}
</style>